<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>axios交互</title>
        <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
        <link rel="stylesheet" href="${path}yq-big/static/css/el-com.css">
        <link rel="stylesheet" href="${path}yq-big/static/css/style.css">

        <script src="//unpkg.com/vue@next"></script>
        <script src="//unpkg.com/element-plus"></script>
        <script src="//unpkg.com/@element-plus/icons-vue"></script>
        <script src="//unpkg.com/element-plus/dist/locale/zh-cn"></script>
        <script src="//unpkg.com/axios/dist/axios.min.js"></script>
    </head>
    <body>
        <div id="list">
            <big-page :table-detail="tableDetail" :pagination-detail="paginationDetail"
                      :operation-detail="operationDetail" :form-detail="formDetail" style="padding: 10px"
                      @change-page="changePage" ref="pageRef"></big-page>
            <el-dialog v-model="dialogTableVisible" :title="title" width="800px">
                <big-form :form-detail="formDiaDetail" ref="formRef"></big-form>
            </el-dialog>
            <big-form-transmit ref="transmitRef"></big-form-transmit>

        </div>
        <script type="module">
            import bigPage from '/yq-big/components/page/bigPage.js'
            import bigForm from '/yq-big/components/form/bigForm.js'
            import bigFormTransmit from '/yq-big/components/formTransmit/bigFormTransmit.js'
            import request from '/yq-big/utils/request.js'

            const List = {
                data() {
                    return {
                        title: '',
                        editId: null,
                        formDiaDetail: {
                            formArray: [
                                {
                                    basicInfo: {
                                        name: 'id',
                                        label: 'ID',
                                    },
                                    operation: {
                                        readonly: true,
                                    },
                                },
                                {
                                    basicInfo: {
                                        name: 'name',
                                        label: '姓名',
                                    },
                                    operation: {
                                        readonly: true,
                                    },
                                },
                                {
                                    type: 'date',
                                    basicInfo: {
                                        type: 'datetime',
                                        name: 'createTime',
                                        label: '创建时间',
                                        format: 'YYYY-MM-DD HH:mm:ss',
                                        valueFormat: 'YYYY-MM-DD HH:mm:ss',
                                    },
                                    operation: {
                                        readonly: true,
                                        hide: true,
                                    },

                                },
                            ],
                            operation: {
                                detail: [
                                    {
                                        value: '提交',
                                        type: 'primary',
                                        plain: true,
                                        beforeIcon: 'Check',
                                        method: this.submitData,
                                        hide: true,
                                    }
                                ],
                                layout: {
                                    align: 'center'
                                }
                            }
                        },

                        formDetail: {
                            formArray: [
                                {
                                    basicInfo: {
                                        name: 'id',
                                        label: 'ID',
                                    },
                                },
                                {
                                    basicInfo: {
                                        name: 'name',
                                        label: '姓名',
                                    },
                                },
                                {
                                    type: 'date',
                                    basicInfo: {
                                        type: 'datetimerange',
                                        name: 'createTime',
                                        label: '创建时间',
                                        format: 'YYYY-MM-DD HH:mm:ss',
                                        valueFormat: 'YYYY-MM-DD HH:mm:ss',
                                        defaultTime: [
                                            new Date(2000, 1, 1, 0, 0, 0),
                                            new Date(2000, 2, 1, 23, 59, 59),
                                        ]
                                    },
                                    operation: {
                                        clearable: true,
                                    },

                                },
                            ],
                        },

                        dialogTableVisible: false,
                        operationDetail: [{
                            value: '搜索',//按钮显示内容
                            type: 'primary',//按钮类型
                            plain: true,//按钮朴素
                            beforeIcon: 'Search',//按钮前图标
                            method: this.searchClick
                        }, {
                            value: '新增',//按钮显示内容
                            type: 'primary',//按钮类型
                            plain: true,//按钮朴素
                            method: this.addClick//按钮点击触发事件
                        },
                            {
                                value: '重置',//按钮显示内容
                                type: 'primary',//按钮类型
                                plain: true,//按钮朴素
                                method: this.resetClick//按钮点击触发事件
                            }
                        ],

                        tableDetail: {
                            tableData: [],
                            tableLabel: [
                                {
                                    label: "编号",
                                    prop: 'id',
                                }, {
                                    label: "姓名",
                                    prop: 'name',
                                }, {
                                    label: "创建时间",
                                    prop: 'createTime',
                                }
                            ],
                            operationDetail: [
                                {
                                    name: '详情',//按钮显示内容
                                    icon: 'Place',//按钮前图标
                                    method: this.detailClick
                                }, {
                                    type: 'conceal',//操作台下拉
                                    name: '更多',
                                    icon: 'Orange',
                                    detail: [//下拉数据
                                        {
                                            name: '修改数据',
                                            method: this.updateClick//按钮点击触发事件
                                        }, {
                                            name: '删除',
                                            icon: 'Delete',
                                            method: this.delClick//按钮点击触发事件
                                        }
                                    ]
                                },
                            ],
                        },

                        paginationDetail: {
                            pageSize: 20,
                            pageNum: 20,
                            total: 2000,
                        },
                    }
                },
                components: {

                    bigPage, bigForm, bigFormTransmit
                },
                methods: {
                    submitData() {
                        let data = this.$refs.formRef.getFormData()
                        if (this.editId) {
                            data.id = this.editId
                            request({
                                url: '/axios/edit',
                                data: data,
                                method: "put"
                            }).then((res) => {
                                this.getList()
                                this.dialogTableVisible = false
                            })
                        } else {
                            request({
                                url: '/axios/add',
                                data: data,
                                method: "post"
                            }).then((res) => {
                                this.getList()
                                this.dialogTableVisible = false
                            })
                        }
                    },
                    changePage() {
                        console.log('我要分页')
                        console.log(this.paginationDetail)
                    },
                    resetClick() {
                        this.$refs.pageRef.resetForm();
                        this.getList();
                    },
                    searchClick() {
                        this.getList()
                        // let data = this.$refs.pageRef.getFormData();
                        // var id = data.id;
                        // var name = data.name;
                        // var createTime = data.createTime;
                        // console.log(id);
                        // console.log(name);
                        // console.log(createTime);
                        // this.$refs.transmitRef.submit("http://127.0.0.1:8081/test/list", 'get', {id: id, name: name});
                    },
                    addClick() {
                        this.dialogTableVisible = true
                        this.editId = null
                        this.formDiaDetail.formArray.forEach((item, index) => {
                            item.basicInfo.default = null
                            item.operation.readonly = false
                        })
                        this.formDiaDetail.formArray[0].operation.hide = false
                        this.formDiaDetail.formArray[2].operation.hide = true
                        this.formDiaDetail.operation.detail[0].hide = false

                        this.title = '添加个人信息'
                        this.$nextTick(() => {
                            this.$refs.formRef.initData()
                        })
                        // console.log("新增按钮被点击")
                        // window.location = "http://127.0.0.1:8081/test/add";
                    },
                    delClick(user) {
                        console.log("删除按钮被点击", user);
                        var id = user.row.id;
                        console.log(user.row.id);
                        request({
                            url: '/axios/del/' + id,
                            method: 'delete'
                        }).then(()=>{
                            this.getList();
                        })
                        // this.$refs.transmitRef.submit("http://127.0.0.1:8081/axios/del", 'get', {id: id});
                        // this.delMenu(id);
                        // window.location = "http://127.0.0.1:8081/test/del?id=" + id;
                    },
                    updateClick(user) {
                        console.log(user)
                        this.editId = user.row.id
                        this.formDiaDetail.formArray.forEach((item, index) => {
                            item.basicInfo.default = user.row[item.basicInfo.name]
                            item.operation.readonly = false
                        })
                        this.formDiaDetail.formArray[0].operation.hide = true
                        this.formDiaDetail.formArray[2].operation.hide = true
                        this.formDiaDetail.operation.detail[0].hide = false
                        this.title = '修改个人信息'
                        this.dialogTableVisible = true
                        this.$nextTick(() => {
                            this.$refs.formRef.initData()
                        })
                    },
                    detailClick(user) {
                        this.formDiaDetail.formArray.forEach((item, index) => {
                            item.basicInfo.default = user.row[item.basicInfo.name]
                            item.operation.readonly = true
                            item.operation.hide = false
                        })
                        this.title = '查看个人信息'
                        this.dialogTableVisible = true
                        this.formDiaDetail.operation.detail[0].hide = true
                        this.$nextTick(() => {
                            this.$refs.formRef.initData()
                        })
                    },
                    getList() {
                        console.log(111333)
                        let data = this.$refs.pageRef.getFormData();
                        if (data.createTime && data.createTime.length) {
                            data.ksTime = createTime[0]
                            data.jsTime = createTime[1]
                        }


                        request({
                            url: '/axios/list',
                            params: data,
                            method: "get"
                        }).then((res) => {
                            this.tableDetail.tableData = res.data
                        })
                    }
                },
                mounted() {
                    this.getList()
                },
            };

            const list = Vue.createApp(List);
            list.use(ElementPlus, {
                locale: ElementPlusLocaleZhCn,
            });
            for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
                list.component(key, component)
            }
            list.mount("#list");
        </script>

    </body>
</html>